<template>
  <div class="fansmsg">
    <router-link to="/message">
      <van-icon name="arrow-left" size="25" />
    </router-link>
    <van-tabs v-model="active">
      <van-tab title="粉丝列表">
        <div class="fanslist" v-for="item in userlist" :key="item.id">
          <img :src="item.icon" alt="" />
          <p class="fansname">{{item.name}} </p>
          <p class="fansqianming">这个人很懒，什么也没有留下</p>

          <van-button
            class="guanzhu-btn"
            :icon="btnicon"
            :type="btntype"
            @click="guanzhu()"
            :text="btntext"
          ></van-button>

          <van-divider
            :style="{
              color: '#1989fa',
              borderColor: '#1989fa',
              padding: '0 16px',
            }"
          />
        </div>
      </van-tab>

      <van-tab title="好友列表">
        <van-index-bar :index-list="indexList" sticky>
          <div v-for="(item, index) in dataList" :key="index">
            <van-index-anchor :index="index">
              {{ index }}
            </van-index-anchor>
            <div
              v-for="(test, inde) in item"
              :key="inde"
              class="cell"
              :data-num="test[1]"
            >
              <van-cell
                ><div class="fanslist">
                  <img :src="test[1]" alt="" />
                  <p class="fansname">{{ test[0] }}</p>
                  <p class="fansqianming">这个人很懒，什么也没有留下</p>

                  <van-divider
                    :style="{
                      color: '#1989fa',
                      borderColor: '#1989fa',
                      padding: '0 16px',
                    }"
                  />
                  </div>
                  </van-cell>
            </div>
          </div>
        </van-index-bar>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      indexList: [],
      dataList: [],
      userlist:[],
      active: 2,
      btntext: "关注",
      btntype: "info",
      btnicon: "plus",
      index: "",
      fans: {
        A: [["A", "https://img01.yzcdn.cn/vant/cat.jpeg"]],
         B: [["B", "https://img01.yzcdn.cn/vant/cat.jpeg"]],
          C: [["C", "https://img01.yzcdn.cn/vant/cat.jpeg"]],
      },
    };
  },
    //获取用户列表
  created() {
      this.indexList = Object.keys(this.fans); //获取到key数组,用作侧边索引
      this.dataList = this.fans;
    axios.get("http://localhost:3000/userList")
      .then(res=>{
        console.log(res);
       this.userlist=res.data.data
      });
  },
  
  methods: {
    onSelect(action) {
      Toast(action.text);
    },
    guanzhu() {
      if (this.btntext == "关注") {
        this.btntext = "已关注";
        this.btntype = "default";
        this.btnicon = "success";
      } else {
        this.btntext = "关注";
        this.btntype = "info";
        this.btnicon = "plus";
      }
    },

  },
};
</script>

<style scoped>
.fanslist {
  padding: 5px;
  margin-top: 10px;
}
.fanslist img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.fansname {
  margin-block-start: -50px;
  margin-inline-start: 80px;
  font-size: 15px;
}
.fansqianming {
  margin-block-start: -10px;
  margin-inline-start: 80px;
  font-size: 14px;
  color: #c8c9cc;
}
.guanzhu-btn {
  position: absolute;
  right: 5px;
  margin-block-start: -60px;
}
</style>